<template>
  <div class="container">
    <!-- 页面标题 -->
    <Header @refresh="refresh" />
    <!-- 操作栏  -->
    <div class="page-main">
      <div class="page-main-query">
        <FilterBar>
          <template #left>
            <OrgCascader
              placeholder="请选择所属部门"
              v-model="query.orgId"
              :clearable="true"
              @query-change="queryChange"
            />
            <el-input
              class="input last"
              placeholder="搜索应用名称"
              v-model="query.search"
              @input="queryChange"
            />
            <el-select v-model="query.healthState" placeholder="请选择健康状态" @change="queryChange" clearable>
              <el-option
                v-for="(value,key,index) in healthStateList"
                :key="key"
                :label="value.text"
                :value="key"
              />
            </el-select>

            <el-button type="primary" @click="reset">重置</el-button>
          </template>
          <template #right>
            <!-- <el-button type="primary" @click="handleCreate">新增应用</el-button> -->
          </template>
        </FilterBar>
      </div>
      <!-- 表格 -->
      <DynamicTable
        ref="DynamicTable"
        v-loading="listLoading"
        class="table-container"
        :total="total"
        v-model:current="page.current"
        v-model:size="page.size"
        :data="list"
        :columns="tableColumns"
        @pagination="getList"
      />
    </div>

    <!-- 新增/编辑 -->
    <EditDrawer
      v-model="showEdit"
      :type="editType"
      :item="currentItem"
      @update-list="refresh"
    />
  </div>
</template>

<script lang="jsx">
import { ref, onMounted, defineComponent, reactive, onActivated, onDeactivated } from "vue";
import { useRouter,useRoute } from "vue-router";
import Header from "@/components/Header.vue";
import FilterBar from "@/components/FilterBar.vue";
import DynamicTable from "@/components/DynamicTable";
import EditDrawer from "./components/EditDrawer.vue";
import OrgCascader from "@/components/OrgCascader/";
import { useListManage } from "@/hooks";
import { Search } from "@element-plus/icons-vue";
import { getAppPageList, deleteApp, getAppDetail } from "@/api/application";

export default defineComponent({
  name: "ApplicationList",
  components: {
    FilterBar,
    Header,
    DynamicTable,
    EditDrawer,
    OrgCascader,
  },
  setup(props, { emit, slots }) {
    const router = useRouter();
    const route = useRoute();
    const query = reactive({});

    let {
      page,
      list,
      total,
      height,
      currentItem,
      editType,
      showEdit,
      refresh,
      listLoading,
      handleCreate,
      handleUpdate,
      handleDelete,
      getList,
      queryChange,
      reset
    } = useListManage(props, emit, {
      getItems: getAppPageList,
      query: query,
      deleteItem: deleteApp,
      getDetail: getAppDetail,
    });
    const healthStateList = ref({
      "0":
      {
        type:"warning",
        text: '异常'
      },
      "1":{
        type:"success",
        text: '健康'
      },
      "2":{
        type:"",
        text: '未配置'
      }
    })
    const tableColumns = ref([
      {
        label: "应用名称",
        key: "appName",
        minWidth: 300
      },
      {
        label: "部门名称",
        key: "orgName",
        minWidth: 200
      },
      {
        label: "服务商",
        key: "provider",
        minWidth: 200
      },
      {
        label: "健康状态",
        width: "100px",
        render: (h, {row, index}) => (
          <span>
            {
              row.healthState?

              <el-tag
                type={healthStateList.value?.[row.healthState]?.type}
                class="status-tag"
              >
                {healthStateList.value?.[row.healthState]?.text}
              </el-tag>
              :'无'
            }
          </span>
        ),
      },
      {
        label: "描述",
        key: "memo",
        minWidth: 200,
        showTooltip: true
      },
      {
        label: "操作",
        fixed: "right",
        width: "300px",
        render: (h, params) => (
          <span>
          
          {
              <el-button
                type="text"
                size="small"
                onClick={() =>{
                  localStorage.setItem('detailAppId', params.row.id)
                   router.push(
                    // `/application/${params.row.id}?name=${params.row.appName}`
                    `/application/detail`
                  )
                }
                 
                }
              >
                详情
              </el-button>
            }
            
            {
              <el-button
                type="text"
                size="small"
                onClick={() =>
                  router.push(
                    `/application/authorization/${params.row.id}?name=${params.row.appName}`
                  )
                }
              >
                服务订阅
              </el-button>
            }
            {
              <el-button
                type="text"
                size="small"
                onClick={() =>
                  router.push(
                    `/application/subscribe/${params.row.id}?name=${params.row.appName}`
                  )
                }
              >
                事件订阅
              </el-button>
            }
            {
              <el-button
                type="text"
                size="small"
                onClick={() =>
                  router.push(
                    `/application/log/${params.row.id}?name=${params.row.appName}`
                  )
                }
              >
                日志
              </el-button>
            }
            {
              <el-button
                type="text"
                size="small"
                onClick={() => handleUpdate(params.row, params.index)}
              >
                编辑
              </el-button>
            }
            {
              <el-popconfirm
                title="确定删除吗？"
                confirmButtonText="好的"
                cancelButtonText="不用了"
                onConfirm={() => handleDelete(params.row)}
                v-slots={{
                  reference: () => (
                    <el-button type="text" size="small">
                      删除
                    </el-button>
                  ),
                }}
              />
            }
          </span>
        ),
      },
    ]);
    onMounted(() => {
      console.log('onMounted')
      getList()
    });

    onActivated(() => {

    })
    return {
      page,
      total,
      getList,
      Search,
      list,
      listLoading,
      editType,
      query,
      queryChange,
      handleCreate,
      tableColumns,
      currentItem,
      showEdit,
      refresh,
      reset,
      healthStateList
    };
  },
});
</script>
<style scoped lang="scss">
.page-main-query {
  :deep(.el-cascader) {
    margin-right: 10px;
  }
}
.el-select {
  margin-right: 10px;
}
</style>
